<template>
  <div>
    <!-- 添加或修改仪器对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="所在实验室">
              {{form.labName}}
            </el-form-item>
            <el-form-item label="仪器名称" >
              {{form.name}}
            </el-form-item>
            <el-form-item label="型号">
            {{form.model}}
            </el-form-item>
            <el-form-item label="规格">
            {{form.spec}}
            </el-form-item>
            <el-form-item label="资产编号">
            {{form.assetNo}}
            </el-form-item>
            <el-form-item label="资产分类名称">
            {{selectDictLabel(this.assetNameOptOptions, form.assetNameOpt)}}
            </el-form-item>
            <el-form-item label="放置地点">
              {{form.classRoomId}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <UploadCom ref="upload" disabled  isImage :userFileList="this.form.images" />
          </el-col>
        </el-row>
        <hr/>
        <el-row>
          <el-col :span="12">
            <el-form-item label="大型设备">
            {{selectDictLabel(this.isLargeScaleOptions, form.isLargeScale)}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="贵重设备">
              {{selectDictLabel(this.isValuableOptions, form.isValuable)}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="特种设备">
              {{selectDictLabel(this.specialEquipmentOptOptions, form.specialEquipmentOpt)}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系工号">
            {{form.contactNo}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名">
            {{form.contactName}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">
            {{form.contactMobile}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="制造商名称">
            {{form.manufacturer}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="国别">
            {{form.madenInCountry}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="建账日期">
            {{form.setUpAccount}}
            </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原值">
              {{form.originalValue}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="仪器状态">
              {{selectDictLabel(this.instrumentationStatusOptOptions, form.instrumentationStatusOpt)}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支持外部使用">
              {{selectDictLabel(this.isAvailableForOthersOptions, form.isAvailableForOthers)}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="不支持原因" prop="unavailableReasonOpt">
              {{selectDictLabel(this.unavailableReasonOptOptions, form.unavailableReasonOpt)}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
          </el-col>
        </el-row>
        <hr />
        <el-row>
          <el-col :span="12">
            <el-form-item label="仪器大类">
              {{selectDictLabel(this.bigCategoryOptOptions, form.bigCategoryOpt)}}

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仪器小类">
              {{selectDictLabel(this.smallCategoryOptOptions, form.smallCategoryOpt)}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="介绍">
          <div v-html="form.profileInfo"></div>
        </el-form-item>
        <el-form-item label="技术介绍">
          <div v-html="form.technologyInfo"></div>
        </el-form-item>
        <el-form-item label="主要功能介绍">
          <div v-html="form.mainFunction"></div>
        </el-form-item>
        <el-form-item label="备注说明">
          <div v-html="form.comments"></div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
  import {
    getInstrumentation,
  } from "@/api/labbase/instrumentation";
  import {
    searchLabInfo,
    getThirdLab
  } from "@/api/labdata/orgnization";
  import UploadCom from "@/views/labdata/commons/upload.vue";
  export default {
    name: "InstruDetails",
    components: {
      UploadCom
    },
    data() {
      return {
        host: process.env.VUE_APP_PROXY,
        //fileList: [],
        dialogVisible: false,
        dialogImageUrl: "",
        title: "",
        // 是否显示弹出层
        open: false,
        // 是否大型设备字典
        isLargeScaleOptions: [],
        // 仪器状态字典
        instrumentationStatusOptOptions: [],
        // 是否提供给外部使用字典
        isAvailableForOthersOptions: [],
        // 特种设备字典
        specialEquipmentOptOptions: [],
        // 不提供给外部原因字典
        unavailableReasonOptOptions: [],
        // 是否贵重设备字典
        isValuableOptions: [],
        // 资产分类名称字典
        assetNameOptOptions: [],
        // 大类名称字典
        bigCategoryOptOptions: [],
        // 小类名称字典
        smallCategoryOptOptions: [],
        // 仪器设备类别字典
        deviceTypeOptOptions: [],
        // 仪器设备来源字典
        deviceFromOptOptions: [],
        // 取得方式字典
        acquisitionWayOptOptions: [],
        // 设备分类字典
        thirdCategoryOptOptions: [],
        // 是否在海关监管年限内字典
        isCustomsExpirationOptions: [],
        // 是否处置字典
        isDisposalOptions: [],
        // 处置后是否继续使用字典
        usingAfterDisposalOptOptions: [],
        // 价值类型字典
        valueTypeOptOptions: [],
        // 是否纳入在线服务平台字典
        isOnlineServiceOptOptions: [],
        // 使用状况字典
        usingOptOptions: [],
        // 是否集约化管理字典
        isIntensiveManageOptOptions: [],
        // 是否公示字典
        isShowPublicOptOptions: [],
        // 是否资源调查字典
        isSurveyOptOptions: [],
        // 查询参数
        queryParams: {
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        }
      };
    },
    watch: {
    },
    created() {
      this.getDicts("isOrNotOpt").then(response => {
        this.isLargeScaleOptions = response.data;
        this.isAvailableForOthersOptions = response.data;
        this.specialEquipmentOptOptions = response.data;
        this.isValuableOptions = response.data;
        this.isDisposalOptions = response.data;
        this.isCustomsExpirationOptions = response.data;
        this.usingAfterDisposalOptOptions = response.data;
        this.isOnlineServiceOptOptions = response.data;
        this.isIntensiveManageOptOptions = response.data;
        this.isShowPublicOptOptions = response.data;
        this.isSurveyOptOptions = response.data;
      });
      this.getDicts("device_type_opt").then(response => {
        this.deviceTypeOptOptions = response.data;
      });
      this.getDicts("device_from_opt").then(response => {
        this.deviceFromOptOptions = response.data;
      });
      this.getDicts("acquisition_way_opt").then(response => {
        this.acquisitionWayOptOptions = response.data;
      });
      this.getDicts("third_category_opt").then(response => {
        this.thirdCategoryOptOptions = response.data;
      });
      this.getDicts("value_type_opt").then(response => {
        this.valueTypeOptOptions = response.data;
      });
      this.getDicts("using_opt").then(response => {
        this.usingOptOptions = response.data;
      });
      this.getDicts("instrumentationStatusOpt").then(response => {
        this.instrumentationStatusOptOptions = response.data;
      });

      this.getDicts("unavailableReasonOpt").then(response => {
        this.unavailableReasonOptOptions = response.data;
      });

      this.getDicts("assetNameOpt").then(response => {
        this.assetNameOptOptions = response.data;
      });
      this.getDicts("bigCategoryOpt").then(response => {
        this.bigCategoryOptOptions = response.data;
      });
      this.getDicts("smallCategoryOpt").then(response => {
        this.smallCategoryOptOptions = response.data;
      });
      getThirdLab().then(response => {
        this.thirdLabList = response.data;
      });
    },
    methods: {
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form ={};
        //this.fileList = [];
        this.resetForm("form");
      },
      /* setFileList(files){
        this.items = [];
        files.forEach(item =>{
          this.fileList.push({
            id: item.fileId,
            name:item.fileName,
            url:this.host+'/labdata/labFile/image?fileId='+item.fileId,
          });
        } );
      }, */
      /** 修改按钮操作 */
      viewData(instrumentationId) {
        this.reset();
        getInstrumentation(instrumentationId).then(response => {
          this.form = response.data;
         /* if (this.form) {
            this.setFileList(this.form.images);
          } */
          this.open = true;
          this.title = "查看仪器";
        });
      },

    }
  };
</script>
<style type="text/css" lang="scss" scoped>
  .input_dialog_w {
    width: 240px;
  }
  .el-form-item {
      margin-bottom: 0px;
  }
  .hide .el-upload--picture-card {
      display: none;
  }
</style>
